<template>
	<view class="wrapper">
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="orderItem" v-for="(item, index) in orderList" :key="item.orderNo"
				@click="goOrderDetail(item.orderNo)">

				<view class="timeBox">
					<text class="time">预订于 {{item.createTime}}</text>
					<view style="display: inline-flex;">
						<text class="status" v-if="item.orderStatus !=0">{{item.orderStatus|orderStatus}}</text>
						<text class="status" style="color: #1989FA;" v-else>{{item.orderStatus|orderStatus}}</text>
						<u-icon name="arrow-right" color="#999999" size="10"></u-icon>
					</view>
				</view>

				<view class="storeInfo">
					<view class="takeAlsoInfoBox flex-row-center">
						<view class="mark1">取</view>
						<text class="value">{{ item.taskInfo|filterNull }} {{ item.takeStoreName }}</text>
					</view>
					<view class="dashedLine">
						<u-line direction="col" dashed color="#CCD4DB" length="50rpx"></u-line>
					</view>
					<view class="takeAlsoInfoBox flex-row-center" style="margin-top: 48rpx;">
						<view class="mark2">还</view>
						<text class="value">{{ item.alsoInfo|filterNull }} {{ item.alsoStoreName }}</text>
					</view>
				</view>

				<view class="carInfoBox">
					<view class="carInfo flex-row-center">
						<text class="title">车型:</text>
						<text class="value">{{ item.modelName }} {{ item.operatingClassification || '' }}</text>
					</view>
					<text class="price">{{ item.rent }}</text>
				</view>

				<view class="btnBox" v-if="item.orderStatus<=4">
					<text class="btn" v-if="(item.orderStatus==3 || item.orderStatus==4) && item.control==1"  @click.stop="clickCar(item)">车辆操作</text>
					<text class="btn" v-if="item.orderStatus==3 && item.control==1" @click.stop="clickStartUseCar(item)">开始用车</text>
					<text class="btn" v-if="item.orderStatus<4" @click.stop="clickCancleOrder(item)">取消订单</text>
					<text class="btn" style="border: 1px solid #1989FA;color: #1989FA;"
						v-if="item.rentPayType ===1 && item.orderStatus===0" @click.stop="payOrder(item)">立即支付</text>
					<text class="btn" v-if="item.orderStatus==4 && item.control==1"  @click.stop="clickRetrunCar(item)">还车验车</text>
				</view>

			</view>
		</mescroll-body>

		<u-popup :show="showCanleAlert" closeable="true" @close="showCanleAlert=false">
			<view class="canleAlert">
				<view class="title">取消订单</view>
				<view class="ruleTips">{{liquidatedDamage.ruleText}}</view>
				<view class="ruleDetailBox">
					<text class="title">车辆租赁费退还</text>
					<view class="value">
						<text v-if="liquidatedDamage.rent != liquidatedDamage.residualRent"
							style="text-decoration: line-through;">¥{{liquidatedDamage.rent}}</text>
						<text style="margin-left: 10rpx; color: #1989FA;">¥{{liquidatedDamage.residualRent}}</text>
					</view>
				</view>
				<view class="otherTip">温馨提示：优惠券不做退还</view>
				<view class="bottomView">
					<view>
						<text class="leftTitle">退还金额</text>
						<text class="price">{{liquidatedDamage.residualRent}}</text>
					</view>
					<view class="cancleBtn" @click.stop="confirmCancle">
						确认取消
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		orderShortList,
		shortCancelOrder,
		shortRefundOrder,
		shortAgainPayOrder,
		liquidatedDamages
	} from '@/api/order-api.js'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				orderList: [],
				showCanleAlert: false,
				currentOrder: {},
				liquidatedDamage: {},
				type: 1
			}
		},
		onLoad(op) {
			console.log(op,'opop')
			this.type = op.type || '1';
			uni.setNavigationBarTitle({
				title: '订单列表'
			})
			uni.$on('refreshOrder', () => {
				this.mescroll.triggerDownScroll();
			})
		},
		methods: {
			clickCar(item){
				uni.navigateTo({
					url: './operateCar?orderNo=' + item.orderNo + '&type=' + "1"
				})
			},
			upCallback(page) {

				orderShortList({
					type: this.type,
					pageNo: page.num,
					pageSize: page.size
				}).then(res => {
					//设置列表数据
					if (page.num == 1) this.orderList = []; //如果是第一页需手动制空列表
					this.orderList = this.orderList.concat(res.data); //追加新数据
					this.mescroll.endSuccess(res.data.length);
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			//点击了取消订单按钮
			clickCancleOrder(order) {
				this.currentOrder = order;
				this.showCanleAlert = true;
				this.getLiquidatedDamages();
			},
			// 用车还车
			clickStartUseCar(item){
				uni.navigateTo({
					url: './useCar?orderNo=' + item.orderNo + '&type=' + "1"+ '&control=' + item.control
				})
			},
			// 还车验车
			clickRetrunCar(item){
				uni.navigateTo({
					url: './returnCar?orderNo=' + item.orderNo + '&type=' + "1" + '&control=' + item.control
				})
			},

			getLiquidatedDamages() {
				liquidatedDamages(this.currentOrder.orderNo).then(res => {
					this.liquidatedDamage = res.data;
				})
			},


			//取消订单
			confirmCancle() {
				this.showCanleAlert = false;

				if (this.currentOrder.orderStatus === 0) { //未支付
					shortCancelOrder(this.currentOrder.orderNo).then(res => {
						if (res.code == 200) {
							this.mescroll.resetUpScroll();
							this.$u.toast('订单取消成功');
						}
					})
				} else {
					shortRefundOrder(this.currentOrder.orderNo).then(res => {
						if (res.code == 200) {
							this.showCancleAlert = false;
							this.mescroll.resetUpScroll();
							this.$u.toast('您已成功取消当前订单，退款将会在1个工作日内退回，如有疑问请联系门店')
						}
					})
				}
			},
			//订单支付
			payOrder(item) {
				let _this = this;
				uni.showLoading();
				shortAgainPayOrder({
					tenantId: this.$store.state.user.tenantId,
					orderNo: item.orderNo,
					amount: item.amount
				}).then(res => {
					uni.hideLoading();
					//唤起微信支付
					let data = JSON.parse(res.data.json);
					let amount = res.data.amount;
					let orderNo = res.data.orderNo;
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: data.timeStamp,
						nonceStr: data.nonceStr,
						package: data.package,
						signType: data.signType,
						paySign: data.paySign,
						success: function(res) {
							uni.$u.toast('支付成功');
							uni.navigateTo({
								url: '/pagesB/activity/activity-paySuccess?orderNo=' +
									orderNo + '&totalPrice=' + amount + '&backViewType=2'
							})
							_this.mescroll.resetUpScroll();
						},
						fail: function(err) {
							uni.showToast({
								title: '订单支付失败'
							})
						}
					});
				})

			},
			//订单详情
			goOrderDetail(orderNo) {
				uni.navigateTo({
					url: './shortOrder-detail?orderNo=' + orderNo + '&type=' + this.type
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		margin: 28upx 20upx;
	}

	.orderItem {
		background-color: $bg-white-color;
		position: relative;
		padding: 32rpx;
		margin-bottom: 18rpx;
		border-radius: 22rpx;

		.timeBox {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #F5F5F5;
			padding-bottom: 20rpx;

			.time {
				font-size: 28rpx;
				color: #393939;
			}

			.status {
				font-size: 28rpx;
				color: #666666;
			}
		}

		.storeInfo {
			position: relative;

			.takeAlsoInfoBox {
				margin-top: 25rpx;
				color: #333;
				font-size: 22rpx;

				.mark1 {
					//box-sizing: border-box;
					width: 44rpx;
					height: 44rpx;
					line-height: 44rpx;
					text-align: center;
					background-color: #F0F8FF;
					color: #1989FA;
					border-radius: 24rpx;
					border: 1rpx solid #1989FA;
				}

				.mark2 {
					box-sizing: border-box;
					width: 44rpx;
					height: 44rpx;
					line-height: 44rpx;
					text-align: center;
					background-color: #FFF6EF;
					color: #FF892C;
					border-radius: 22rpx;
					border: 1rpx solid #FF892C;
				}

				.value {
					margin-left: 16rpx;
					font-size: 28rpx;
					color: #666666;
				}
			}

			.dashedLine {
				position: absolute;
				top: 44rpx;
				left: 22rpx;
			}
		}

		 .carInfoBox {
		    display: flex;
		    justify-content: space-between;
		    align-items: center;
		    margin-top: 25rpx;
		
		    .carInfo {
		      background-color: #EFF6FF;
		      color: #333333;
		      font-size: 28rpx;
		      padding: 12rpx 16rpx;
		      border-radius: 8rpx;
		      max-width: 520rpx;
		      
		      .title {
		        white-space: nowrap;
		        color: #666666;
		      }
		
		      .value {
		        margin-left: 16rpx;
		        white-space: nowrap;
		        overflow: hidden;
		        text-overflow: ellipsis;
		      }
		    }
		
		
		    .price {
		      font-size: 30rpx;
		      font-weight: bold;
		      color: #FF5020;
		
		      &::before {
		        content: '¥';
		        font-size: 24rpx;
		      }
		    }
		  }

		.btnBox {
			margin-top: 30rpx;
			border-top: 1px solid #F5F5F5;
			padding-top: 20rpx;
			display: flex;
			justify-content: flex-end;

			.btn {
				margin-left: 20rpx;
				padding: 0 40rpx;
				line-height: 68rpx;
				text-align: center;
				border: 1px solid #666666;
				border-radius: 10rpx;
				font-size: 28rpx;
				color: #666666;
			}
		}

	}

	.canleAlert {
		padding: 40rpx 34rpx 0;

		.title {
			font-size: 34rpx;
			font-weight: bold;
			color: #333333;
		}

		.ruleTips {
			margin-top: 50rpx;
			font-size: 26rpx;
			color: #666666;
		}

		.ruleDetailBox {
			display: flex;
			align-items: center;
			margin: 28rpx 10rpx;
			border: 1px solid #ADB8BF;
			height: 90rpx;
			box-sizing: border-box;

			.title {
				width: 320rpx;
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				font-size: 24rpx;
				color: #333333;
				border-right: 1px solid #ADB8BF;
				;
			}

			.value {
				width: 350rpx;
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				font-size: 24rpx;
				color: #333333;
			}
		}

		.otherTip {
			font-size: 26rpx;
			color: #999999;
			margin-bottom: 20rpx;
		}

		.bottomView {
			height: 150rpx;
			background: #FFFFFF;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.leftTitle {
				font-size: 28rpx;
				color: #999999;
			}

			.price {
				margin-left: 12rpx;
				font-size: 36rpx;
				color: #EC4863;

				&::before {
					content: '¥';
					font-size: 26rpx;
				}
			}

			.cancleBtn {
				width: 300rpx;
				height: 120rpx;
				line-height: 120rpx;
				text-align: center;
				background: #1989FA;
				border-radius: 24rpx;
				font-size: 36rpx;
				font-weight: 600;
				color: #FFFFFF;
			}
		}
	}
</style>